<template>
  <div>
    <el-dialog title="选择区域" :visible.sync="inventoryAreaVis" @close="close" width="420px" append-to-body :close-on-click-modal="false">
        <el-form ref="inventAreaForm">

            <el-form-item label="仓库:" :label-width="formLabelWidth">
              {{main_store}}
            </el-form-item>

            <el-form-item label="库区:" :label-width="formLabelWidth">
              <el-select v-model="select_area" @change="choseArea" placeholder="请选择" size="small">
                <el-option
                  v-for="item in areaList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="库位:" :label-width="formLabelWidth">
              <el-select v-model="select_depart" placeholder="请先选择库区" size="small">
                <el-option
                  v-for="item in departlist"
                  :key="item.departmentId"
                  :label="item.departmentCode"
                  :value="item.departmentId">
                </el-option>
              </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="danger" :loading="submitLoading" @click="submitArea('inventAreaForm')">确 定</el-button>
        </div>
          </el-dialog>
        </div>
</template>

<script>
import { AddStoreArea, UpdateArea, GetAreaStock, GetStoreStock, GetDepartStock } from '@/api/store.js';
import { getStore } from '@/utils/app.js';
import { FindStoreArea, FindAreaDepart} from '@/api/store.js'
export default {
  name: 'addstore',
  props: ['openSelectArea'],
  data() {
    return {
      inventoryAreaVis: false,
      submitLoading: false,
      select_area: '',
      select_depart: '',
      areaList: [],
      departlist: [],
      formLabelWidth: '100px',
    }
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
  },
  mounted() {
    this.getStoreArea();
  },
  methods: {
    // 获取页面仓库和库区
    getStoreArea() {
      FindStoreArea(this.storeid).then( res => {
          this.areaList = res.data;
      })
    },
    // 选择库区显示库位
    choseArea(val) {
      // 根据库区id加载库位数据
      FindAreaDepart(val).then( res => {
        this.departlist = res.data;
      })
    },
    close() {
      this.inventoryAreaVis = false;
      this.resetForm();
      this.$emit("update:openSelectArea", false);
    },
    resetForm() {
      this.select_area = '',
      this.select_depart = ''
    },
    submitArea(formName) {
          if(!this.select_depart && !this.select_area) {
            GetStoreStock(this.storeid).then( res => {
              this.$store.commit('ware/SET_STOCKPROD', res.data);
              this.resetForm();
            })
          } else if (this.select_area && !this.select_depart) {
            let reqData = {
              prodArea: this.select_area,
              warehouseId: this.storeid
            }
            GetAreaStock(reqData).then( res => {
              this.$store.commit('ware/SET_STOCKPROD', res.data);
              this.resetForm();
            })
          } else if(!this.select_area && this.select_depart) {
            this.$message({
              message: '请先选择库区',
              type: 'warning'
            })
          } else {
            let reqData = {
              prodArea: this.select_area,
              warehouseId: this.storeid,
              prodDepart: this.select_depart
            }
            GetDepartStock(reqData).then( res => {
              this.$store.commit('ware/SET_STOCKPROD', res.data);
              this.resetForm();
            })
          }
          this.inventoryAreaVis = false;
          this.$emit("update:openSelectArea", false);
    }
  },
  watch: {
    openSelectArea(newVal,oldVal) {  
      this.inventoryAreaVis = newVal;
    }
  }
}
</script>

<style lang="scss" scoped>
  
</style>